<%@ page contentType="text/html;charset=UTF-8" pageEncoding="utf-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/index.css"/>
    <script src="${pageContext.request.contextPath}/js/vue.js"></script>
    <script src="${pageContext.request.contextPath}/js/jquery-3.2.1.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/common.js"></script>
    <title>我的收藏</title>
</head>
<body>
<jsp:include page="common/header.jsp"/>
<article>
    <!-- 网站主体 -->
    <div id="main">
        <section class="aside">
            <!-- 定义右侧窗口信息 -->
            <jsp:include page="common/asideUser.jsp"/>

        </section>

        <section>
            <h1 class="detail-col">我的收藏</h1>
            <div class="bg-hr"></div>
            <div id="sec-more-list" class="detail-col-list">
                <!-- 定义一个条目-->
                <div class="pro" v-for="c in cllectRes">
                    <div class="img">
                        <img :src="'${pageContext.request.contextPath}/images/'+c.ext+'.svg'" />
                    </div>
                    <div class="cs">
                        <div class="up">
                            <a :href="'${pageContext.request.contextPath}/resource/detail?resId='+c.res_id">{{c.resource_name}}</a>
                        </div>
                        <div class="down">
                            <b class="uploader" title="作者">{{c.nick_name}}</b><b class="time" title="收藏时间">{{getTime(c.collection_time)}}</b>
                        </div>
                    </div>
                    <div class="arr">
                        <span>积分:<b>{{c.score}}</b></span>
                    </div>
                </div>
                <!-- 分页 -->
               <jsp:include page="common/pagination.jsp"/>

            </div>
        </section>
    </div>
</article>
<jsp:include page="common/footer.jsp"/>
<script>
    new Vue({
        el:"#main",
        data:{
            page:1,
            total:0,
            cllectRes:[],
        },
        created(){ //vue实例创建成功后
            this.showres();
        },
        watch:{
            page: function(newPage,oldPage){
                // 获取 新页码 对应的 数据
                fetch("${pageContext.request.contextPath}/user/collectMsg?page=" + newPage).then(ret =>{
                    if (ret.status){
                        this.cllectRes = ret.data.list;
                        this.total = ret.data.total;
                    }
                })
            }
        },
        methods:{
            showres(){
                fetch("${pageContext.request.contextPath}/user/collectMsg").then(ret =>{
                    if (ret.status){
                        this.cllectRes = ret.data.list;
                        this.total = ret.data.total;
                    }
                })
            },
            getTime(timestamp){
                let date = new Date(timestamp);
                return date.format("yyyy-MM-dd HH:mm:ss");
            },
        }
    })
</script>
</body>

</html>
